<template>
  <div id="app" ref="appREF">
    <router-view />
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import Vue from 'vue'
// import home from '@/views/Layouts/index'
export default {
  // components: {
  //   home
  // },
  data() {
    return {
      scroll: '',
      animate: ''
    }
  },
  created() {
  },
  watch: {

  },
  mounted() {
    // window.addEventListener('scroll', this.handleScroll)
  },
  methods: {

  },
  //销毁,否则跳到别的路由还是会出现
  destroyed() {
    // window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="scss">
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // font-family: Arial, "Microsoft YaHei", PingFangSC-Regular, "Hiragino Sans GB", "Droid Sans Fallback", "WenQuanYi Micro Hei", sans-serif;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  color: #2c3e50;
  // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  // padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

body {
  height: 100vh;
  background: #f2f5f7;
}

// .slide-right-enter-active,
// .slide-right-leave-active,
// .slide-left-enter-active,
// .slide-left-leave-active {
//   // will-change: transform;
//   transition: all 1500ms linear;
//   position: absolute;
// }
// .slide-right-enter {
//   // opacity: 0;
//   transform: translate3d(-100%, 0, 0);
// }
// .slide-right-leave-active {
//   // opacity: 0;
//   transform: translate3d(100%, 0, 0);
// }
// .slide-left-enter {
//   // opacity: 0;
//   transform: translate3d(100%, 0, 0);
// }
// .slide-left-leave-active {
//   // opacity: 0;
//   transform: translate3d(-100%, 0, 0);
// }

/* 左侧离场，右侧入场 动画 */
.slide-left-leave {
  transform: translate(0, 0);
}

.slide-left-leave-active,
.slide-left-enter-active {
  transition: all 0.15s linear;
  /* 为了保证组件切换动画时，两个组件重叠显示，在动画持续时间将做动画的组件根元素设置为绝对行为 */
  position: absolute;
}

.slide-left-leave-to {
  transform: translate(-100%, 0);
}

.slide-left-enter {
  transform: translate(100%, 0);
}

.slide-left-enter-to {
  transform: translate(0, 0);
}

/* 右侧入场 动画 */
.slide-right-leave {
  transform: translate(0, 0);
}

.slide-right-leave-active,
.slide-right-enter-active {
  transition: all 0.15s;
  position: absolute;
}

.slide-right-leave-to {
  transform: translate(100%, 0);
}

.slide-right-enter {
  transform: translate(-100%, 0);
}

.slide-right-enter-to {
  transform: translate(0, 0);
}

.foolters {
  display: flex;
  align-items: center;
  padding: 20px 0 20px 0;

  img {
    width: 150px;
    margin: 0 auto;
  }
}
</style>
